<header>
{% load static %}
    <script src="{% static 'js/jquery.slim.min.js' %}"></script>
    <script type="text/javascript">
        window.onload = function () {
            let address = window.location.pathname;
            $(".nav-link").each(function () {
                if (address === $(this).attr("href")) {
                    $(this).addClass("active");
                }
                else {
                    $(this).removeClass("active");
                }
            })
        }
    </script>

    <nav class="navbar navbar-expand-lg navbar-light rounded" style="background-color: #e3f2fd;">
        <div class="navbar-collapse justify-content-start" style="width: 200px">
            <a class="navbar-nav align-self-start" href="/">
                <img src="{% static 'images/favicon.ico' %}" class="navbar-brand" alt="图标">
            </a>
        </div>

        <div class="navbar-collapse justify-content-center">
          <ul class="navbar-nav align-self-center">
              <a class="navbar-brand" href="/">中学生兴趣课堂选课系统</a>
          </ul>
        </div>
        <div class="navbar-collapse justify-content-end" style="width: 200px">
          <ul class="navbar-nav align-self-end">
            {% if front_user %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ front_user.css_name }}</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown">
                        <a class="dropdown-item" href="{% url 'users:edit_user' %}">修改信息</a>
                        <a class="dropdown-item" href="{% url 'users:logout' %}">注销</a>
                    </div>
                </li>
            {% else %}
                <li class="nav-item">
                    <a href="{% url 'users:login' %}" class="nav-link">登录</a>
                </li>
                <li class="nav-item">
                    <a href="{% url 'users:register' %}" class="nav-link">注册</a>
                </li>
            {% endif %}
        </ul>
        </div>
    </nav>

    <nav class="navbar navbar-expand-lg navbar-light rounded" style="background-color: #e3f2fd; margin-bottom: 30px;">
        <div class="collapse navbar-collapse justify-content-md-center">
            <!--根据登录的角色出现不同内容的导航栏-->
            <ul class="nav nav-pills"  id="menu_list">
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'courses:course_list' %}">课程列表</a>
                </li>
            {% if front_user.css_role == 'student' %}
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'courses:selected_list' %}">已选课程</a>
                </li>
            {% elif front_user.css_role == 'teacher' %}
                <li class="nav-item">
                  <a class="nav-link" href="">学生列表</a>
                </li>
            {% elif front_user.css_role == 'school' %}
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'users:teacher_list' %}">教师列表</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'users:school_student_list' %}">学生列表</a>
                </li>
            {% endif %}
            </ul>
        </div>
    </nav>
</header>